<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>用Formdata对象上传二进制文件</title>
	<style>
		*{
			padding: 0;
			margin: 0;
			list-style-type: none;
			text-decoration: none;
		}
		.big_box{
			width: 200px;
			height: 350px;
			/*border: 1px solid red;*/
			margin: 50px auto;


		}
		.big_box .img_box{
			position: relative;
			width: 200px;
			height: 150px;
			background: red;
		}
		.big_box .img_box img{
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}
		.big_box .input_box{
			margin-top: 10px;
			font-size: 12px;
			color: 12px;
		}
		.big_box .input_box #file{
			width: 67px;
			height: 20px;
			font-size: 10px;
		}
		.big_box .progress_box{
			width: 200px;
			height: 10px;
			border-radius: 15px;
			border: 1px solid #999;
			background: #f0f0f0;
			margin-top: 10px;
			display: none;
		}
		.big_box .progress_box #bar{
			width: 0%;
			height: 100%;
			color: white;
			font-size: 6px;
			text-align: center;
			line-height: 10px;
			background: rgb(20,100,230);
		}





	</style>
</head>
<body>
	 <!-- 用Formdata对象上传二进制文件： -->






      <!-- 准备html布局开始 -->
      <div class="big_box">
      	<div class="img_box" id="img_box">
      		<!-- <img src="../img/01.jpeg" alt=""> -->
      	</div>
      	<div class="input_box">
      		请选择图片<input type="file" id="file" >
      	</div>
      	<div class="progress_box" id="progress_box">
      		<div class="bar" id="bar">30%</div>
      	</div>
      	



      </div>
       <!-- 准备html布局结束 -->
       <!-- javascript部分开始 -->
       <script type="text/javascript">
       	// 获取文件选择控件
       	var file = document.getElementById("file");
       	var bar = document.getElementById("bar");
       	var progress_box = document.getElementById("progress_box");
       	var img_box = document.getElementById("img_box");
       	// 为文件选择控件添加onchange事件，在用户选择时候触发
       	file.onchange= function () {
       		// 创建空的formData表单对象
       		var formData = new FormData();
       		// 将用户选择的文件追加到formData表单对象中去
       		formData.append("attrName",this.files[0]);

       		// 创建ajax对象
       		var xhr = new XMLHttpRequest();
       		// 配置ajax对象
       		xhr.open("post","http://localhost:3000/upload");



       		// 在文件上传过程中进度事件被持续触发
       		xhr.upload.onprogress=function (ev){
       			progress_box.style.display = "block";

       			// ev.loaded是文件已经上传的大小,ev.total是文件的总大小
       			// 进度百分比格式的计
       			var bli=(ev.loaded/ev.total)*100;
       			var result = bli+"%";
       			// 设置精度条的变化宽度
       			bar.style.width=result;
       			// 将动态百分比数值也显示到进度条上
       			bar.innerHTML = result;
       			/*if ( result=="100%" ) {
       				progress_box.style.display = "none";

       			}*/

       		};



       		// 发送ajax请求
       		xhr.send(formData);
       		// 监听onload事件获取服务器响应回来的数据
       		xhr.onload=function (){
       			// 当响应回来的状态码是200的时候
       			if (xhr.status==200) {
       				// 将服务器响应回来的数据显示在控制台中
       				// console.log(xhr.responseText)

       				// 将服务器响应回来的数据格式由json字符串转换成json对象格式
       				var result  = JSON.parse(xhr.responseText);
       				console.log(result);
       				// 动态创建img标签
       				var img = document.createElement("img");
       				// 给图片标签设置src属性
       				img.src =result.path;
       				// 当图片加载完成之后
       				img.onload=function(){
       					// 将图片显示在页面中
       				img_box.appendChild(img);
       				}
       				






       			}
       		}



       	}
       	





       </script>





        <!-- javascript部分结束-->


		
		



	
</body>
</html>